<template>
    <div class="myvideo">
        <div class="classify">
          <ul>
              <router-link to="/usercenter">
                <li class="iconfont"><a href="###">&#xe616;个人信息</a></li>
              </router-link>
              <router-link to="/like">
                <li class="iconfont"><a href="#/like">&#xe686;我的关注</a></li>
              </router-link>
              <router-link to="/fans">
                <li class="iconfont"><a href="###">&#xe6cf;我的粉丝</a></li>
              </router-link>
              <router-link to="/collect">
                <li class="iconfont"><a href="###">&#xe60c;我的收藏</a></li>
              </router-link>
              <router-link to="/myblog">
                <li class="iconfont"><a href="###">&#xe6af;我的博客</a></li>
              </router-link>
              <router-link to="myvideo">
                <li class="iconfont active"><a href="###" class="active">&#xe64e;我的视频</a> <i style="color:#26a2ff">{{this.length}}</i></li>
              </router-link>
              <router-link to="mybook">
                <li class="iconfont"><a href="###">&#xe777;我的书籍</a></li>
              </router-link>
           
          </ul>
      </div>

      <div class="login" v-show="login">
        <a href="/#/login">还未登录，请先登录！</a>
      </div>
      
      <div class="single" v-show="main" ref="wrapper">
        <ul>
          <li v-show="shows[index]" v-for="(item,index) in list" :key="item.index" class="li">
            <div class="photo">
              <img :src=item.photo alt="">

            </div>
            <div class="changephoto" v-show="chashow[index]">
              <div  class="picture" v-show="up">
                <a href="###" class="iconfont upload" title="点击选择上传封面">&#xe6cc;
                <input type="file" class="upphoto" accept="image/*" multiple v-on:input="aquire(index)"></a>
              </div>
              <div class="picture" v-show="!up">
                <img :src="url" alt="" v-show="!up" id="photo" @mouseenter="showdele()" @mouseleave="notshow()">
                <i class="iconfont" title="删除" v-show="delicon" @mouseenter="showdele()" @mouseleave="notshow()">
                  <a href="###" @click="del()">&#xe68f;</a>
                </i>
              </div>
            </div>
              
            <div class="message">
              <p>名字： <i v-show="show[index]">{{item.name}}</i> <input type="text" v-show="chashow[index]":value="item.name" class="name"></p>
              <p>路径：<i v-show="show[index]">{{item.path}}</i> <input type="text" v-show="chashow[index]" :value="item.path" class="path"></p>
              <p>简介：<i v-show="show[index]">{{item.introduction}}</i> <input type="text" v-show="chashow[index]" :value="item.introduction" class="intro"> </p>
              <p>
                <select :value="item.clazz" class="kind" v-show="chashow[index]" :placeholder="item.clazz">
                  <option>HTML</option>
                  <option>CSS</option>
                  <option>JAVASCRIPT</option>
                  <option>ES6</option>
                  <option>NODE.JS</option>
                  <option>VUE.JS</option>
                  <option>JAVA</option>
                  <option>PYTHON</option>
                  <option>C</option>
                  <option>C++</option>
                  <option>PHP</option>
                  <option>WEB</option>
                  <option>JQUERY</option>
                  <option>AJAX</option>
                  <option>DOM</option>
                  <option>XML</option>
                  <option>NET</option>
                  <option>JAVAWEB</option>
                  <option>ELEMENT</option>
                  <option>PS</option>
                  <option>UI</option>
                  <option>其它</option>
                </select>
                <span class="span" v-show="chashow[index]" @click="sure (index)"><a href="###">确定</a></span>
              </p>
              <p>上传时间：{{item.createtime.slice(0,10)}} {{item.createtime.slice(11,20)}}</p>

              <p class="icons">
                <span class="iconfont"><a href="###" title="浏览"
                >&#xe67f;</a> <i>{{item.browse}}</i></span>
                <span class="iconfont"><a href="###" title="评论" @click="showcom(index)">&#xe6a4;</a> <i>{{item.comments}}</i></span>
                <span class="iconfont"><a href="###" title="点赞"
                 ref="good">&#xe6d4;</a> <i>{{item.likes}}</i></span>
                <span class="iconfont"><a href="###" title="收藏">&#xe690;</a> <i>{{item.favorite}}</i></span>
              </p>

            </div>

            <span class="icon" @mouseover="flow(index)" @mouseout="flowout(index)">
              <a href="###" class="iconfont" title="编辑" @click="change(index)"  v-show="icons[index]">&#xe622;</a>
              <a href="###" class="iconfont delete" title="删除" @click="delvideo(index)" v-show="icons[index]">&#xe651;</a>
            </span>

            <div class="comment" v-show="showc[index]">
              <ul>
                <li v-show="!list[index].comments"><p>暂无评论</p></li>
                <li v-for="(item,index) in listp" :key="item.index">
                  <p @mouseover="delshow(index)" @mouseleave="leave(index)" v-show="showp[index]">
                    <router-link :to='"/userdetails/" + item.user.id' tag="i" style="color: #333">
                      <img :src="item.user.photo" alt="">{{item.user.name}}：
                    </router-link>
                    {{item.comment.message}} 
                    <i>{{item.comment.createtime.slice(0,10)}}</i>
                    <a href="###" class="iconfont" title="删除评论" v-show="showdel[index]" @click="delcom(index)">&#xe66e;</a>
                  </p>
                </li>
                <li>
                  <input type="text" placeholder="发表评论" v-model="sendmess">
                  <span @click="send(index)"><a href="###">发送</a></span>
                </li>
              </ul>
            </div>

          </li>

          <div class="mark"  v-show="isshow">
            <p>确定删除？</p>
            <span><a href="###" @click="no()">取消</a></span>
            <span><a href="###" @click="dele()">确定</a></span>
          </div>

        </ul>
      </div>

      <div class="mark"  v-show="isshow">
          <p>确定删除？</p>
          <span><a href="###" @click="no()">取消</a></span>
          <span><a href="###" @click="dele()">确定</a></span>
      </div>

      <p class="page">
        <span><a href="###" class="iconfont" title="上一页" @click="last()">&#xe634;</a></span>
        <span><i>{{page}}</i></span>
        <span><a href="###" class="iconfont" title="下一页" @click="next()">&#xe666;</a></span>
      </p>

    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import Vue from 'vue'
import BScroll from 'better-scroll'
export default {
    name: 'myvideo',
    data () {
      return { 
        show: [],
        chashow: [],
        isshow: false,
        icon: false,
        login: true,
        main: false,
        up: true,
        delicon: false,
        showdel: [],
        showp: [],
        list: [],
        showc: [],
        listp: [],
        icons: [],
        shows: [],
        index: '',
        name: '',
        path: '',
        intro: '',
        kind: '',
        sendmess: '',
        page: 1,
        length: '',
        url: '',
      }
    },

    mounted () {
      this.$nextTick(() => {
        // 解决移动端因vue数据更新异步而无法滚动的问题
        this.scroll = new BScroll(this.$refs.wrapper, {
          click:true, //设置click参数，使单句歌词可点击
          adjustTime: 350, // 拉动之后的返回时间，默认400
          mouseWheel: true,
        })
      })

    },

    methods: {
      last () {
        if(this.page > 1) {
          this.page --
          this.length -= this.list.length
          let postData = qs.stringify({
            type: 0,
            page: this.page,
          })

          axios.post(`/api/showR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              this.list = response.data
              console.log(this.list)
              for (var i = 0;i < this.list.length; i++) {
              this.icons.push(false) 
              this.shows.push(true)
              this.showc.push(false)
              this.show.push(true)
              this.chashow.push(false)
              }
              // console.log(this.shows)
              // console.log(this.icons)
              // console.log(this.list)
            } 

          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "当前已经是第一页了！"
          })
        }

      },

      next () {
        if (this.list.length == 10) {
          this.page ++
          let postData = qs.stringify({
            type: 0,
            page: this.page,
          })

          axios.post(`/api/showR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              this.list = response.data
              this.length += this.list.length
              console.log(this.list)
              for (var i = 0;i < this.list.length; i++) {
              this.icons.push(false) 
              this.shows.push(true)
              this.showc.push(false)
              this.show.push(true)
              this.chashow.push(false)
              }
              // console.log(this.shows)
              // console.log(this.icons)
              // console.log(this.list)
            } 

          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "当前已经是最后一页了！"
          })
        }
      },

      delvideo (index) {
        this.isshow = true
        this.index = index
        console.log("why?")
      },

      no () {
          this.isshow = false
      },

      dele () {
        this.isshow = false
        this.shows[this.index] = !this.shows[this.index]
        let newItem = this.shows[this.index]
        Vue.set(this.shows, this.index, newItem)
        let id = this.list[this.index].id
        // console.log(this.shows)

        let postData = qs.stringify({
          type: 0,
          page: 1,
        })

        axios.post(`/api/deleteR/${id}`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            console.log(response.data)
            if (response.data !== "") {
              let postData = qs.stringify({
                type: 0,
                page: 1,
              })

              axios.post(`/api/showR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  this.list = response.data
                  console.log(this.list)
                  for (var i = 0;i < this.list.length; i++) {
                  this.icons.push(false) 
                  this.shows.push(true)
                  this.showc.push(false)
                  this.show.push(true)
                  this.chashow.push(false)
                  }
                  
                } 

              })
            }
          } 

        })

      },

      flow (index) {
        this.icons[index] = !this.icons[index]
        let newItem = this.icons[index]
        Vue.set(this.icons, index, newItem)
        // console.log(this.icons)
        // console.log(index,this.icons[index])
      },

      flowout (index) {
        this.icons[index] = !this.icons[index]
        let newItem = this.icons[index]
        Vue.set(this.icons, index, newItem)
        // console.log(this.icons)
        // console.log(index,this.icons[index])
      },

      change (index) {
        this.show[index] = !this.show[index]
        // console.log(this.show[index])
        this.chashow[index] = !this.chashow[index]
      },

      getBase64 (file) {
        return new Promise(function (resolve, reject) {
          let reader = new FileReader()
          let imgResult = ''
          reader.readAsDataURL(file)
          reader.onload = function () {
            imgResult = reader.result
          }
          reader.onerror = function (error) {
            reject(error)
          }
          reader.onloadend = function () {
            resolve(imgResult)
          }
        })
      },

      dataURItoBlob (dataURI) {
        // base64 解码
        // console.log('dataURI', dataURI)
        let byteString = window.atob(dataURI.split(',')[1])
        let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
        // let T = mimeString.split('/')[1]
        let ab = new ArrayBuffer(byteString.length)
        let ia = new Uint8Array(ab)
        for (let i = 0; i < byteString.length; i++) {
          ia[i] = byteString.charCodeAt(i)
        }
        return new Blob([ab], {type: mimeString})
      },

      aquire (index) {
        let data = document.getElementsByClassName("upphoto")[index].files[0]
        console.log('data', data)
        // this.up = false
        // this.url = data.name
        // console.log(this.url)

         this.getBase64(data).then(res => {
          //  console.log('res', res)
           this.up = false
           this.url = res
           
          // this.newphoto = res
          // console.log('this.newphoto', this.newphoto)
          this.newphoto = this.dataURItoBlob(res)
          console.log('newphoto', this.newphoto)
          // if (this.newphoto !== '') {
            // this.photo = false
            // this.mod = true
          
            // 获取修改后的图片url
            // this.url = this.$refs.photo.value
            // console.log(this.url)

            // console.log(this.newphoto)

            var formdata = new FormData()
            formdata.append('photo', this.newphoto)

            axios.post(`/api/blogPhoto`, formdata, {headers:{'Content-type': 'multipart/form-data'}}).then((response) => {

              if (response.status === 200) {
                this.$message({
                  type: 'success',
                  message: response.data
                })
                
              } 

            })

            // this.photo = formdata
            // formdata.append('photo', ' '+this.photoname)
            console.log(formdata)
            // console.log(this.photo)
        })

        // this.up = false
      },

      showdele () {
        this.delicon = true
      },

      notshow () {
        this.delicon = false
      },

      del () {
        this.up = true
      },

      sure (index) {
        this.name = document.getElementsByClassName("name")[index].value
        this.path = document.getElementsByClassName("path")[index].value
        this.intro = document.getElementsByClassName("intro")[index].value
        this.kind = document.getElementsByClassName("kind")[index].value
        console.log(this.name,this.path,this.intro,this.kind)

        let postData = qs.stringify({
          name: this.name,
          introduction: this.intro,
          path: this.path,
          type: 0,
          clazz: this.kind,
        })

        let id = this.list[index].id

        axios.post(`/api/updateR/${id}`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            // console.log(response.data)
            // alert(response.data)
            // console.log(response.data)
            if (response.data === "保存成功") {
              // alert("修改成功")
              // this.$router.go(0)
              this.show[index] = !this.show[index]
              this.chashow[index] = !this.chashow[index]

              let postData = qs.stringify({
                type: 0,
                page: 1,
              })

              axios.post(`/api/showR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  this.list = response.data
                  console.log(this.list)
                  for (var i = 0;i < this.list.length; i++) {
                  this.icons.push(false) 
                  this.shows.push(true)
                  this.showc.push(false)
                  this.show.push(true)
                  this.chashow.push(false)
                  }
                  // console.log(this.shows)
                  // console.log(this.icons)
                  // console.log(this.list)
                } 

              })

              this.$message({
                type: 'success',
                message: "修改成功！"
              })

            }
            

          } 

        })
        // this.$router.go(0)
      },

      showcom (index) {
        if (this.showc[index] == false) {
          for (var i = 0; i < this.list.length; i++) {
            this.showc[i] =false
            this.showc[index] = true
            let newItem = this.showc[index]
            Vue.set(this.showc, index, newItem)
          }

        } else {
          for (var i = 0; i < this.list.length; i++) {
            this.showc[i] =false
            let newItem = this.showc[index]
            Vue.set(this.showc, index, newItem)
          }

        }

        let postData = qs.stringify({
          page: 1,
        })

          let id = this.list[index].id

        axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.listp = response.data
            console.log(this.listp)
            this.showp.push(true)
            this.showdel.push(false)
            
          } 
        })
      },

      send (index) {
        let postData = qs.stringify({
          message: this.sendmess,
        })

        let id = this.list[index].id

        axios.post(`/api/resource/${id}/write`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            console.log(response.data)
            let postData = qs.stringify({
              page: 1,
            })

              let id = this.list[index].id

            axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                this.listp = response.data
                console.log(this.listp)
                this.showp.push(true)
                this.showdel.push(false)
                
              } 
            })
          } 

        })
        this.$router.go(-1)
      },

      delshow (index) {
        this.showdel[index] = !this.showdel[index]
        let newItem = this.showdel[index]
        Vue.set(this.showdel, index, newItem)
      },

      leave (index) {
        this.showdel[index] = !this.showdel[index]
        let newItem = this.showdel[index]
        Vue.set(this.showdel, index, newItem)
      },

      delcom (index) {
        this.showp[index] = !this.showp[index]
        let newItem = this.showp[index]
        Vue.set(this.showp, index, newItem)

        let postDatap = qs.stringify({
          id: this.listp[index].comment.id,
        })

        axios.post(`/api/deleteComment`, postDatap, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            // console.log(this.showdel)
            // console.log(this.listp)
            console.log(response.data)
          } 
        })
      },

    },

    created () {
      axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          if (response.data !== "") {
            this.main = true
            this.login = false
          }
        } 

      })

      let postData = qs.stringify({
        type: 0,
        page: 1,
      })

      axios.post(`/api/showR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.list = response.data
          this.length = this.list.length
          console.log(this.list)
          for (var i = 0;i < this.list.length; i++) {
           this.icons.push(false) 
           this.shows.push(true)
           this.showc.push(false)
           this.show.push(true)
           this.chashow.push(false)
          }
          // console.log(this.shows)
          // console.log(this.icons)
          // console.log(this.list)
        } 

      })

    },
}
</script>

<style lang="stylus" scoped>
.myvideo
  width 100%
  height auto
  position relative
  .login
    width 80%
    line-height 36.5rem
    top 5rem
    margin-left 17%
    margin-bottom 2rem
    text-align center
    font-size 1rem
    position absolute
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    a
      color red
    a:hover
      color #26a2ff
  .classify
    width 15%
    height auto
    position fixed
    margin-top 5rem
    margin-left 1%
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    ul
      padding-top 2rem
      padding-bottom 4rem
      margin-top .5rem
      // background-color red
      li
        width 100%
        margin-top .2rem
        line-height 4rem
        text-align center
        // background-color #fff
      li:hover
        //background-color #26a2ff
        background-color #eee
      .active
        background-color #eee
        color #26a2ff
  .single
    width 82%
    height 41rem
    overflow hidden
    top 5rem
    margin-left 17%
    margin-bottom 2rem
    font-size .9rem
    position absolute
    background-color #fff
    ul
      width 100%
      height auto
      padding-bottom 2rem
      padding-top 1rem
      // background-color skyblue
      .li
        width 96%
        margin-left 2%
        margin-top 1rem
        padding-bottom 2.5rem
        position relative
        border .05rem #eee solid
        border-radius 10px
        box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
        background-color #fff
        .photo
          width 6%
          height 4rem
          left 6%
          position absolute
          background-color #fff
          top 1rem
          img 
            height 100%
            width 150%
            margin-left -50%
            box-shadow 0 0 0.266667rem rgba(131, 171, 175, 0.5)
        .changephoto
          width 10%
          height 6rem
          left 2%
          position absolute
          // background-color red
          top 1rem
          .picture
            width 100%
            height 6rem
            border-radius 10px
            background-color #fbfdff
            border 1px dashed #c0ccda
            position relative
            // background-color skyblue
            .upload
              width 10%
              line-height 6rem
              margin-left 40%
              color #26a2ff
              font-size 1.5rem
              // background-color red
            input 
              width 400%
              position absolute
              line-height 6rem
              left 0%
              opacity 0       
              // background-color red
            img
              width 100%
              height 6rem
              margin-left 0%
              border-radius 10px
            i
              width 100%
              line-height 6rem
              position absolute
              left 0%
              text-align center
              background-color rgba(220,220,220,0.3)
              a
                color red
                font-size 1.3rem
        .message
          width 60%
          left 13%
          position absolute
          padding-top .8rem
          box-sizing border-box
          // background-color red
          p
            line-height 1.4rem
            font-size .8rem
            input 
              width 50%
              line-height 1rem
              border .05rem #ccc solid
            select 
              width 20%
              margin-left 7%
              border .05rem #ccc solid
            .span 
              border .05rem #ccc solid 
              margin-left 25%
              background-color #fff
              a
                color #26a2ff
            .span:hover 
              background-color skyblue
              a
                color #fff
          .icons
            width 100%
            height 1.5rem
            // background-color skyblue
            span 
              width 10%
              display inline-block
              font-size 1rem
              // background-color red
              i 
                font-size .8rem
        .icon
          width 27%
          height 6rem
          margin-left 73%
          display inline-block
          // background-color skyblue
          a
            line-height 6rem
            font-size 1.5rem
            margin-left 30%
          .delete:hover
            color red
        .comment
          width 100%
          height auto
          margin-top 2rem
          position relative
          border-top .1rem #ccc solid
          // background-color #f5f6f7
          ul
            margin-top .5rem
            height auto
            li
              width 89%
              font-size .8rem
              margin-bottom .5rem
              margin-left 5%
              background-color #f5f6f7
              p
                width 100%
                text-indent .6rem
                img
                  height 1.4rem
                  width 2.5%
                  margin-left 0%
                  border-radius 50%
                  box-shadow 0 0 0.266667rem rgba(131, 171, 175, 0.5)
                i
                  font-size .7rem
                  color #aaa
                a
                  position absolute 
                  right 8rem
                  font-size 1.5rem
              input 
                width 84%
                position absolute
                bottom .2rem
                text-indent .5rem
                font-size .8rem
                border .05rem #ccc solid
              span
                padding 0rem 1rem
                position absolute
                bottom .2rem
                margin-left 84%                
                border .05rem #ccc solid
                background-color #fff
                a
                  color #26a2ff
              span:hover
                background-color skyblue
                a
                  color #fff
      .mark
        width 20%
        height 8rem
        position absolute 
        top 6rem
        left 36%
        border 1px #ccc solid
        border-radius 10px
        box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
        background-color #fff
        p
          width 100%
          line-height 3rem
          font-size 1.2rem
          text-align center
          margin-top .5rem
          //   background-color #fff
        span 
          line-height 4rem
          padding .4rem
          margin-left 22%
          font-size .8rem
          background-color #fff
  .page 
    width 15%
    left 1%
    line-height 3rem
    bottom 1rem
    position fixed
    z-index 10
    display flex
    border .05rem #ccc solid
    background-color #fff
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    span
      width 10%
      margin-left 15%
      text-align center
      font-size 1.2rem
      background-color #fff
      a
        font-size 2rem
      i
        color #26a2ff
</style>